<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>button</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			text-align: center;
		}
		.button{
			display: inline-block;
			text-decoration: none;
			padding: 10px;
			margin-left: 10px;
			margin-top: 20px;
			border-radius: 5px;
			
		}
		.button:hover{
			box-shadow: 0px 8px 16px 1px black, 0px 6px 20px 0 black;
		}
		a:first-child{
			background: #009688;
			color: #fff;
		}
		a:nth-child(2){
			background: yellow;
			color: black;
		}
		a:nth-child(3){
			background: orange;
			color: black;
		}
		a:nth-child(4){
			background: red;
			color: #fff;
		}
		a:last-child{
			background: green;
			color: #fff;
		}
	</style>
</head>
<body>
	<a href="#" class="button">steal</a>
	<a href="#" class="button">yellow</a>
	<a href="#" class="button">orange</a>
	<a href="#" class="button">red</a>
	<a href="#" class="button">green</a>
</body>
</html>
